<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Table</title>
    <link rel="stylesheet" href="/static/lib/layuiadmin/plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/static/lib/layuiadmin/css/global.css" media="all">
    <link rel="stylesheet" href="/static/lib/layuiadmin/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/lib/layuiadmin/css/table.css" />
</head>

<body>
<div class="admin-main">
    <blockquote class="layui-elem-quote">
        当前解决方案:<span style="color:red;"><{$solution.title}></span>
    </blockquote>
    <fieldset class="layui-elem-field">
        <legend>推荐产品</legend>
        <div class="layui-field-box layui-form">
            <table class="layui-table admin-table">
                <thead>
                <tr>
                    <th style="width: 30px;"><input type="checkbox" lay-filter="allselector" lay-skin="primary"></th>
                    <th>标题</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="content">
                <{volist name="assocProducts" id="item"}>
                <tr>
                    <td><input type="checkbox" lay-skin="primary"></td>
                    <td><{$item.name}></td>
                    <td>
                        <a href="javascript:;" data-id="<{$item.id}>" data-opt="cancel" class="layui-btn layui-btn-danger layui-btn-mini cancel">取消</a>
                    </td>
                </tr>
                <{/volist}>
                </tbody>
            </table>
        </div>
    </fieldset>
    <div>
        <span class="layui-btn" id="add">添加关联</span><a href="/admin/solution/index" class="layui-btn layui-btn-danger">返回上级</a>
    </div>
    <div class="page"></div>

</div>

<script type="text/javascript" src="/static/lib/layuiadmin/plugins/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/lib/layuiadmin/js/'
    });

    layui.use('layer',function(){
        var layer = layui.layer;
        var $ = layui.jquery;

        $("#add").click(function(){

            layer.open({
                type:2,
                maxmin:true,
                area:["500px","500px"],
                content:"/admin/solution/forAssoc"
            });
        });

        function addToAssoc(assocId){
            $.get('/admin/solution/addAssoc',{id:"<{$solution.id}>",assocId:assocId},function(data){
                if(data.code == 1) {
                    $("#content").append('<tr> \
                    <td><input type="checkbox" lay-skin="primary"></td> \
                    <td>' + data.data.name + '</td> \
                    <td> \
                    <a href="javascript:;" data-id="' + data.data.id + '" data-opt="cancel" class="layui-btn layui-btn-danger layui-btn-mini cancel">取消</a> \
                    </td> \
                    </tr>');
                }
            });
        }

        $("#content").delegate('.cancel','click',function(){
            var assocId = $(this).data('id');
            var that = this;
            $.get('/admin/solution/cancelAssoc',{id:'<{$solution.id}>',assocId:assocId},function(data){
                alert(data.msg);
                if(data.code == 1){
                    $(that).parent().parent().remove();
                }
            });
        });

        window.addToAssoc = addToAssoc;

    });
</script>
</body>

</html>